<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<!-- 引入组件 -->
		<script src="../js/ajax.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="html5plus://ready"></script>
		<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
		<title></title>
		<style type="text/css">
			[v-cloak]{display: none;}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<header>
				<van-row>
					<!--导航栏 -->
					<van-col span="24" class="com-header">
						<!--获取商品数量{{}}-->
						<van-nav-bar right-text="清空购物车" left-text="购物车" @click-right="clearShop" style="background: red;">
						</van-nav-bar>
					</van-col>
				</van-row>
			</header>
			<section>
				<van-row>
					<van-col span="24" class="com-main">
						<!--购物车无商品 -->
						<div v-show="isShow">
							<div style="text-align: center;color: #C9C9C9;font-size: 30px;margin-top: 200px;">
								<van-icon name="cart" />
							</div>
							<div style="color:#C9C9C9 ;text-align: center;">购物车空空如也</div>
						</div>
						<!--购物车有商品 -->
						<div v-show="isShow==false">
							<div v-for="(item,index) in goods">
								<van-row>
									<van-col span="2">
										<van-checkbox v-model="item.checked" style="margin-top: 40px;" class="checkbox" @change="select(item.Id,item.RealPrice,item.buyCount,item.checked)"
										 :value="item.Id"></van-checkbox>
									</van-col>
									<van-col span="4">
										<div @click="skipPd(item.Id)">
											<img :src="item.CoverImage" onerror="this.src='../../img/c9718d69fc4a930f.jpg'" style="height: 100%;width: 100%;margin-top: 50%;" />
										</div>
									</van-col>
									<van-col span="18">
										<van-card :num="item.buyCount" :price="item.RealPrice" :title="item.Name" :origin-price="item.MarketPrice">
											<van-row slot="footer" style="margin-top: -10%;">
												<van-col span="18">
													<van-stepper v-model="item.buyCount" @plus="add(item.Id, item.buyCount+1)" @minus="minus(item.Id, item.buyCount-1)"></van-stepper>
												</van-col>
												<van-col span="4">
													<van-tabbar-item icon="home">
														<van-icon name="delete" size="2em" title="删除" @click="btn_delete(item.Id)" />
													</van-tabbar-item>
												</van-col>
											</van-row>
										</van-card>
									</van-col>
								</van-row>
							</div>
						</div>
					</van-col>
				</van-row>
			</section>
			<footer>
				<div class="settleAccounts">
					<van-submit-bar :price="totalMoney*100" button-text="提交订单" @submit="onSubmit" />
					<van-checkbox v-model="checked" @change="selectAll">全选</van-checkbox>
				</div>
			</footer>
		</div>
		<script type="text/javascript">
			Vue.use(VueLazyload);
			var pio=JSON.parse(localStorage.getItem("userData")).Phone;
			var vm = new Vue({
				el: '#app',
				data: {
					active: 0,
					goods: [],
					p: 1,
					jsonData: {},
					isShow: true,
					phone: pio,
					buyCount: 1,
					checked: "",
					checkedData: []
				},
				methods: {
					onSubmit() { //提交订单
						plus.webview.create("Wmiddle.html", "Wmiddle", {}, {
							nId: vm.checkedData,
							isShow: false,
							address: true
						}).show("slide-in-left");
					},
					clearShop() {
						this.$dialog.confirm({
							title: '确认框',
							message: '确定要清除购物车吗？'
						}).then(() => {
							localStorage.removeItem(this.phone);
							this.$toast.success("清除成功");
							this.goods = [];
							var qw=plus.webview.currentWebview();
							qw.reload();
						}).catch(() => {
							this.$toast.fail("点击取消");
						});
					},
					add(id, num) { //购物车数量增加
						var goodsArr = JSON.parse(localStorage.getItem(personal.Phone)); //购物车内的商品
						for (var i = 0; i < goodsArr.length; i++) { //遍历商品
							if (goodsArr[i].goodsId == id) {
								goodsArr[i].buyCount += 1; //商品数量+1
								localStorage.setItem(vm.phone, JSON.stringify(goodsArr));
							}
						}
						plus.webview.currentWebview().reload();
					},
					minus(id, num) { //购物车数量减少
						var goodsArr = JSON.parse(localStorage.getItem(vm.phone)); //购物车内的商品
						for (var i = 0; i < goodsArr.length; i++) { //遍历商品
							if (goodsArr[i].goodsId == id) {
								goodsArr[i].buyCount -= 1; //商品数量-1
								localStorage.setItem(vm.phone, JSON.stringify(goodsArr));
							}
						}
					},
					btn_delete(id) { //删除购物车商品
						this.$dialog.confirm({
							title: '删除',
							message: '是否确定删除'
						}).then(() => {
							var goodsArr = JSON.parse(localStorage.getItem(vm.phone)); //购物车内的商品
							for (var i = 0; i < goodsArr.length; i++) { //遍历商品
								if (goodsArr[i].goodsId == id) {
									goodsArr.splice(i, 1); //删除此商品
									localStorage.setItem(vm.phone, JSON.stringify(goodsArr));
									//刷新页面
									vm.goods.splice(i, 1);
									vm.$toast.fail("删除成功");
								}
							}
						}).catch(() => {
							vm.$toast.fail("已取消");
						});
					},
					skipPd(id) {
						plus.webview.create("Windex.html", "Windex", {}, {
							nId: id
						}).show("slide-in-left");
					},
					select(id, price, buyCount, checked) { //选中后触发
						if (checked) {
							var cd = {
								goodsId: id,
								buyCount: buyCount
							}
							this.checkedData = this.checkedData.concat(cd)
						} else {
							for (var i = 0; i < this.checkedData.length; i++) {
								if (this.checkedData[i].goodsId == id) {
									this.checkedData.splice(i, 1);
								}
							}
						}
					},
					selectAll() { //全选
						for (var i = 0; i < this.goods.length; i++) {
							this.goods[i].checked = this.checked;
						}
					}
				},
				computed: {
					totalMoney() {
						var money = 0;
						for (var i = 0; i < this.goods.length; i++) {
							if (this.goods[i].checked) {
								money += this.goods[i].RealPrice * this.goods[i].buyCount
							}
						}
						return money;
					}
				},
				mounted() {
					var userData = JSON.parse(localStorage.getItem("userData"));
					var data1 = JSON.parse(localStorage.getItem(userData.Phone)); //购物车商品
					var Id;
					var Name;
					var CoverImage;
					var RealPrice;
					if (data1.length > 0) {
						this.isShow = false;
						for (var i = 0; i < data1.length; i++) {
							ajax({
								url: "http://dsapi.ysd3g.com/API/GoodsDetail",
								dataType: "jsonp",
								data: {
									gId: data1[i].goodsId
								},
								success(res) {
									if (res.Error) {
										vm.$toast.fail(res.Msg);
									} else {
										Id = res.Detail.Id;
										Name = res.Detail.Name;
										CoverImage = res.Detail.CoverImage;
										RealPrice = res.Detail.RealPrice;
										for (var j = 0; j < data1.length; j++) {
											if (Id == data1[j].goodsId) {
												vm.buyCount = data1[j].buyCount;
											}
										}
										vm.jsonData = {
											"Id": Id,
											"Name": Name,
											"CoverImage": CoverImage,
											"RealPrice": RealPrice,
											"buyCount": vm.buyCount,
											"checked": false
										}
										vm.goods = vm.goods.concat(vm.jsonData);
									}
								}
							});
						}

					}
				}
			})
		</script>
	</body>

</html>
